<template>
	<div class="TpCoupon">
		<yd-tab active-color="#e25051" :callback="tabcallback">
			<yd-tab-panel label="未使用" tabkey=1>
				<div class="TpCoupon-btn" @click="GOTpCouponDh">兑换优惠券</div>
				<div class="mytab mytab1">
					
						<div v-for="wsitem,key in wsCoupon" :key="key" class="Coupon-item" @click="GOTpCouponInfo(wsitem.couponId,true)">
							<div class="ci-bg"></div>
							<div class="ci-left">
								<p class="ci-title">{{wsitem.couponTitle}}</p>
								<p class="ci-time">使用期限{{wsitem.startTime}} - {{wsitem.endTime}}</p>
							</div>

							<div class="ci-right">
								￥<span>{{wsitem.couponPrices}}</span>
								<div class="ci-right-box">
								</div>
							</div>
						</div>
				</div>
			</yd-tab-panel>
			<yd-tab-panel label="已使用" tabkey=2>
				<div class="TpCoupon-btn" @click="GOTpCouponDh">兑换优惠券</div>
				<div class="mytab mytab2">
					<div class="Coupon-item" v-for="ysitem,key in ysCoupon" :key="key" @click="GOTpCouponInfo(wsitem.couponId,false)">
						<div class="ci-bg"></div>
						<div class="ci-left">
								<p class="ci-title">{{ysitem.couponTitle}}</p>
								<p class="ci-time">使用期限{{ysitem.startTime}} - {{ysitem.endTime}}</p>
						</div>

						<div class="ci-right">
							￥<span>{{ysitem.couponPrices}}</span>
							<div class="ci-right-box">
							</div>
						</div>
					</div>
				</div>
			</yd-tab-panel>
			<yd-tab-panel label="已过期" tabkey=3>
				<div class="TpCoupon-btn" @click="GOTpCouponDh">兑换优惠券</div>
				<div class="mytab mytab2">
					<div class="Coupon-item" v-for="ygitem,key in ygCoupon" :key="key" @click="GOTpCouponInfo(ygitem.couponId,false)">
						<div class="ci-bg"></div>
						<div class="ci-left">
								<p class="ci-title">{{ygitem.couponTitle}}</p>
								<p class="ci-time">使用期限{{ygitem.startTime}} - {{ygitem.endTime}}</p>
						</div>

						<div class="ci-right">
							￥<span>{{ygitem.couponPrices}}</span>
							<div class="ci-right-box">
							</div>
						</div>
					</div>
				</div>
			</yd-tab-panel>
		</yd-tab>
		
		<v-defect class="TpCoupon-defect" v-if="defect" :defectdata="defectdata"></v-defect>
	</div>
</template>

<script>
	import { mapGetters, mapActions } from 'vuex'
	import api from '../fetch/api'
	import defect from "./defect";
	export default {
		name: "TpCoupon",
		data() {
			return {
				defect:false,
				SessionUserinfo:JSON.parse(sessionStorage.getItem("userinfo")),
				defectdata:{
					msg:'暂无优惠券',
					type:"TpCoupon"
				},
				wsCoupon: [], //未使用
				ysCoupon: [], //已使用
				ygCoupon: [], //已过期
			}
		},
		computed: {
			...mapGetters([
				'source',
			])
		},
		mounted() {
			if(this.SessionUserinfo.length == 0) {
				this.$router.push({
					path: "/login"
				})
				if (this.wsCoupon.length!=0) {
						this.defect=false;
				}
			} else {
				
				this.CouponList()
			}
		},
		methods: {
			...mapActions({
				getSessionUserinfo: 'getSessionUserinfo',
				getCouponListInfo:'getCouponListInfo'
			}),
			GOTpCouponDh(){
				this.$router.push({
					path:"/TpCouponDh"
				})
			},
			GOTpCouponInfo(couponId,coupontype){
				this.$router.push({
					path:"/TpCouponInfo",
					query:{
						couponId:couponId,
						coupontype:coupontype
					}
				})
			},
			tabcallback(e){
				if (e=="未使用") {
					if (this.wsCoupon.length==0) {
						this.defect=true;
					}else{
						
						this.defect=false;
					}
				}
				if (e=="已使用") {
					if (this.ysCoupon.length==0) {
						this.defect=true;
					}else{
						
						this.defect=false;
					}
				}
				if (e=="已过期") {
					if (this.ygCoupon.length==0) {
						this.defect=true;
					}else{
						
						this.defect=false;
					}
				}
			},
			CouponList() {
				let ajaxSign = {
					source: this.source, // string 是 ios
					token: this.SessionUserinfo.token, // string 是 c4ddaf5b2475622f3de27906bce5d860
					//					payPrices: this.source, // string 否 在个人信息里面 不传payPrices
					//										type:2, // string 否 1 可以 2 不可以 3 过期
				};
				let ajaxData = api.getAES(ajaxSign);
				api.GetCouponList(ajaxData)
					.then(res => {
						let CouponListInfo = res.result;
						for(var i = 0; i < CouponListInfo.length; i++) {
							if(CouponListInfo[i].status == 1) {
								var endTime = new Date(CouponListInfo[i].endTime * 1000);
								if(endTime >= api.getLocalTime(8)) {
									this.wsCoupon = this.wsCoupon.concat(CouponListInfo[i])
								} else {
									this.ygCoupon = this.ygCoupon.concat(CouponListInfo[i])
								}
							}
							if(CouponListInfo[i].status == 0) {
								this.ysCoupon = this.ysCoupon.concat(CouponListInfo[i])
							}

							CouponListInfo[i].startTime = api.settiem(CouponListInfo[i].startTime);
							CouponListInfo[i].endTime = api.settiem(CouponListInfo[i].endTime);
						}
						this.getCouponListInfo(CouponListInfo)
					})
			},
			
		},
		components: {
			'v-defect':defect
		}
	}
</script>

<style>
	.TpCoupon .yd-tab-nav .yd-tab-active:before {
		width: 100%;
		left: 0;
		margin-left: 0;
	}
	
	.TpCoupon .yd-tab-nav-item:not(:last-child):after {
		height: 0;
	}
	
	.TpCoupon .yd-tab-nav:after {
		width: 0;
	}
	
	.TpCoupon .yd-tab-panel {
		background: #f5f5f5;
	}
	
	.TpCoupon .mytab {
		padding: .24rem;
		padding-top: 0;
		box-sizing: border-box;
	}
	
	.TpCoupon .Coupon-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 1.54rem;
		padding-left: .2rem;
		box-sizing: border-box;
		background: url(../assets/img/images/Coupon-imgleft.png) no-repeat left;
		background-size: .05rem 100%;
		margin-bottom: .24rem;
		position: relative;
	}
	
	.TpCoupon .ci-title {
		font-size: .31rem;
		line-height: .31rem;
	}
	
	.TpCoupon .ci-time {
		font-size: .25rem;
		line-height: .25rem;
		margin-top: .27rem;
		color: #A4A4A4;
	}
	
	.TpCoupon .ci-bg {
		position: absolute;
		left: .04rem;
		top: 0;
		bottom: 0;
		background: #fff;
		height: 1.54rem;
		box-sizing: border-box;
		width: 80%;
		z-index: -2;
	}
	
	.TpCoupon .mytab .ci-right {
		height: 100%;
		color: #fff;
		padding: 0 .15rem 0 .11rem;
		box-sizing: border-box;
		position: relative;
	}
	
	.TpCoupon .mytab1 .ci-right {
		background: url(../assets/img/images/Coupon-imgright1.png) no-repeat right;
		background-size: .98rem 100%;
		background-position: 0 0 0 0;
	}
	
	.TpCoupon .mytab2 .ci-right {
		background: url(../assets/img/images/Coupon-imgright2.png) no-repeat right;
		background-size: .98rem 100%;
		background-position: 0 0 0 0;
	}
	
	.TpCoupon .ci-right-box {
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0rem;
		box-sizing: border-box;
		z-index: -1;
	}
	
	.TpCoupon .mytab1 .ci-right-box {
		background: #E25051;
	}
	
	.TpCoupon .mytab2 .ci-right-box {
		background: #a4a4a4;
	}
	
	.TpCoupon .ci-right span {
		font-size: .8rem;
		line-height: 1.54rem;
		display: inline-block;
	}
	.TpCoupon-btn{
		width: 100%;
		margin: .15rem 0;
		text-align: center;
		line-height: .8rem;
		color: #E25051;
		font-size: .24rem;
		background: #fff;
	}
	.TpCoupon-defect{
		top: 4rem !important;
	}
</style>